<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="Public/css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="Public/css/htmleaf-demo.css">
    <link rel="stylesheet" href="./Public/bt3/css/bootstrap.min.css">
    <script src="./Public/jquery.11.min.js" type="text/javascript"></script>
    <script>
        $(function () {
            //表单提交事件
            $('#form').submit(function () {
                //序列化，抓取form里面所有的提交内容
                var formData = $(this).serialize();
                //异步
                $.ajax({
                    type:'post',
                    url :'index.php?c=Arc&a=add',
                    data:formData,
                    dataType:'json',
                    success:function (phpData) {
                        var msg = '';
                        msg += '<div class="card">';
                        msg += ' <a id="del" href="javascript:;" class="glyphicon glyphicon-remove"></a>';
                        msg += '<h2>'+phpData.title+'</h2>';
                        msg += '<h3>为 '+phpData.who+'许愿</h3>';
                        msg += '第 <i>'+(phpData.id+1)+'</i> 条留言';
                        msg += '<p>'+phpData.content+'</p>';
                        msg += '<span>'+phpData.sendTime+'</span>';
                        msg += '</div>';
                        //追加留言
                        $('#card').append(msg);
                        document.getElementById('form').reset();
                    }
                })
            })
//            function del() {
//                var id = $(this).siblings('i').html()-1;
//                $.ajax({
//                    type:'post',
//                    url :'./index.php?c=Arc&a=del',
//                    data:{i:id},
//                })
//                $(this).parents('.card').remove();
//            }
            $(document).on('click','#del',function () {
                var id = $(this).siblings('i').html()-1;
                $.ajax({
                    type:'post',
                    url :'./index.php?c=Arc&a=del',
                    data:{i:id},
                })
                $(this).parents('.card').remove();
            })
        })
    </script>
    <title>许愿墙</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            font-family: "\5FAE\8F6F\96C5\9ED1", "微软雅黑", "Microsoft YaHei", Helvetica, Tahoma, sans-serif;
        }
        .card {
            background: #fff;
            display: inline-block;
            margin: 1em;
            box-shadow: .5em 0 1.25em #ccc;
            border-radius: .3em;
            overflow: hidden;
            width: 18em;
            padding: 10px;
            position: relative;
            /*height: 500px;*/
        }
        .card a{
            position: absolute;
            top:5px;
            right:5px;
        }

        .card img {
            display: block;
        }
        .card span{
            display: block;
            margin-left: 130px;
            margin-top: 50px;
        }
        .card p{
            margin-top: 20px;
        }
        .card h3{
            margin-top: 20px;
        }

        .produter {
            width: 250px;
            height: 35px;
            margin: 0 auto 450px auto;
            position: relative;
            z-index: 100;
            -webkit-perspective: 400px;
            -moz-perspective: 400px;
            perspective: 400px;
            -webkit-perspective-origin: 50% 100%;
            -moz-perspective-origin: 50% 100%;
            perspective-origin: 50% 100%;
        }
        /* produter下所有div的统一设置 */

        .produter div {
            position: absolute;
            padding: 10px;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
            top: 100%;
            left: 0;
            width: 250px;
            -webkit-transform-origin: 0 0;
            -moz-transform-origin: 0 0;
            transform-origin: 0 0;
        }

        .produter .odd {
            background: #ddd;
            -moz-transform: rotateX(-180deg);
            -webkit-transform: rotateX(-180deg);
            -webkit-transition: 1s;
            -moz-transition: 1s;
            -o-transition: 1s;
            transition: 1s;
        }

        .produter .even {
            background: #eee;
            -moz-transform: rotateX(180deg);
            -webkit-transform: rotateX(180deg);
            -webkit-transition: 1s;
            -moz-transition: 1s;
            -o-transition: 1s;
            transition: 1s;
        }

        .produter .first {
            background: #ddd;
            -moz-transform: rotateX(-100deg);
            -webkit-transform: rotateX(-100deg);
            -webkit-transition: 0.6s;
            -moz-transition: 0.6s;
            -o-transition: 0.6s;
            transition: 0.6s;
        }

        .produter .last {
            box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.3);
            border-radius: 0 0 10px 10px;
        }

        .produter:hover .sub {
            -moz-transform: rotateX(0deg);
            -webkit-transform: rotateX(0deg);
        }

        .produter .sub p {
            font: normal 12px/15px arial, sans-serif;
            color: #000;
            padding: 0;
            margin: 0;
        }

        .produter .sub p span {
            display: block;
            text-align: center;
            font: bold 14px/18px arial, sans-serif;
            color: #069;
        }

        .produter .sub p a {
            font: normal 12px/15px arial, sans-serif;
            color: #09c;
        }

        .produter .sub p a:hover {
            text-decoration: none;
        }

        .produter a.main {
            display: block;
            font: bold 15px/35px arial, sans-serif;
            text-align: center;
            text-decoration: none;
            color: #fff;
            background: #069;
            height: 40px;
            /*border-radius: 10px 10px 10 0;*/
            position: relative;
            z-index: 100;
        }
        #box{
            max-width: 1200px;
            /*min-height: 600px;*/
            margin: 0 auto;
            position: relative;

        }
        #box #box1{
            position: absolute;
            top:50px;
            right: 0;
        }

        body{
            background: url("./Public/images/3.jpg");

        }
        #card{
            min-height: 500px;
        }
    </style>
</head>
<body>
<!--    <canvas id="sakura"></canvas>-->

    <div class="btnbg">
        <div id="box" class="htmleaf-container">
            <header>
                <h1 style="text-align: center;color: white">许愿墙</h1>
                <?php if(isset($_SESSION['username'])): ?>
                <h3 style="color: white">欢迎<?php echo $_SESSION['username'] ?>回来 <a class="btn btn-info btn-sm" href="?c=Member&a=out">退出</a></h3>
                <?php else: ?>
                <a href="?c=Member&a=login" class="btn btn-success btn-sm">登录</a>
                <a class="btn btn-info btn-sm" href="?c=Member&a=reg">注册</a>
                <?php endif; ?>
            </header>
            <div id="card" class="htmleaf-content">
                <?php foreach ($data as $k => $v): ?>
                <div  class="card">
                    <?php if (isset($_SESSION['username'])): ?>
                       <?php echo '<a id="del" href="javascript:;" class="glyphicon glyphicon-remove" ></a>' ?>
                    <?php endif; ?>
                    <h2><?php echo $v['title'] ?></h2>
                    <h3>为<?php echo $v['who'] ?>许愿</h3>
                    第 <i><?php echo $k+1 ?></i> 条留言
                    <p><?php echo $v['content'] ?></p>
                    <span><?php echo $v['sendTime'] ?></span>

                </div>
                <?php endforeach ?>
<!--                <div class="card">-->
<!--                    <h2>余罪</h2>-->
<!--                    <p>《余罪》是爱奇艺、新丽传媒、天神娱乐联合出品的悬疑犯罪网剧，由张睿执导，沈嵘，张仕栋等担任编剧，张一山、常戎、吴优、张锦程等主演。</p>-->
<!--                    <p>该剧改编自常书欣的同名小说，讲述警校学生余罪因特殊选拔而进入生活与社会矛盾中，之后成为卧底遇到惊险事件的故事[1] 。剧集于2016年5月23日在爱奇艺播出。</p>-->
<!--                </div>-->
            </div>

            <div id="box1" class="produter">
                <a class="main" href="">我要许愿</a>
                <div class="sub first">
                    <form id="form" action="javascript:;" method="post">
                        <p><span>标题</span></p>
                        <div class="sub even">
                            <p><input name="title" required="" type="text"style="width: 230px;height: 30px" placeholder=" 写出你的主题吧"></p>
                            <div class="sub odd">
                                <p><span>TA</span><input name="who" required="" type="text"style="width: 230px;height: 30px" placeholder=" 你要为谁许愿"></p>
                                <div class="sub even">
                                    <p><span>写出你的愿望</span><textarea name="content" required="" id="" cols="35" placeholder="留下你的愿望" rows="1" class="form-control"></textarea></p>
                                    <div class="sub odd last">
                                        <?php if (isset($_SESSION['username'])): ?>
                                            <input type="submit" value="留下愿望" style="border: none;background: #069;color: white;padding: 5px">

                                        <?php else: ?>
                                            <a href="?c=Member&a=login" class="btn btn-success btn-sm">请先登录</a>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
<!--    </div>-->



    <script type="text/javascript" src="./Public/dist/prod/js/jQuery-face-cursor.js"></script>
    <script>
        $(".card").faceCursor();
    </script>

</body>
</html>